<template>
  <div>
   <h2>门店列表1</h2>
   <hr>
   房号名称:
   <input type="text" v-model="state.MDName">
   房号状态:<input type="text" v-model="state.MDZT">
   <input type="button" value="查询" @click="MDShow">
   <table border="1">
    <tr>
      <td>房号名称</td>
      <td>房号图片</td>
      <td>房号地址</td>
      <td>房号电话</td>
      <td>房号描述</td>
      <td>房号状态</td>
      <td>操作</td>
    </tr>
    <tr v-for="item in list">
      <td>{{item.mdName}}</td>
      <td>
        <img :src="item.mdPhoto" width="60px" height="60px">
      </td>
      <td>{{item.mdAddress}}</td>
      <td>{{item.mdPhone}}</td>
      <td>{{item.mdms}}</td>
      <td>{{item.mdzt==1?"上架":"下架"}}</td>
      <td>
        <input type="button" v-if="item.mdzt==1" value="下架" @click="MDXZT(item.mdId,item.mdzt)">
        <input type="button" v-else value="上架" @click="MDXZT(item.mdId,item.mdzt)">
        <input type="button" value="修改" @click="MDFan(item.mdId)">
      </td>
    </tr>
   </table>
   <div>
    共<span style="color: red;">{{ Count }}</span>条数据
    <input type="button" value="首页" @click="fenye(1)">
    <input type="button" value="上一页" @click="fenye(state.index-1)">
    <input type="button" value="下一页" @click="fenye(state.index+1)">
    <input type="button" value="尾页 " @click="fenye(Count2)">

  </div>
  </div>
  
</template>

<script setup lang="ts">
import { reactive, toRefs, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import axios from 'axios';

const router = useRouter();
const route = useRoute();

let data:any=reactive({
  state:{
    index:1,
    size:2,
    MDName:'',
    MDZT:''
  },
  list:[],
  Count:0,
  Count2:0
})

let {state,list,Count,Count2}=toRefs(data);
onMounted(() => {
  MDShow()
})

//反填
function MDFan(MDid:any)
{
  router.push({
    path:('/MDFan'),
    query:{
      MDid:MDid
    }
  })
}





// 分页
function fenye(Newindex:any)
{
  if(Newindex>=1&&Newindex<=Count2.value)
{
  state.value.index=Newindex
  MDShow()
}
}

//修改状态

function MDXZT(MDid:any,MDZT:any)
{
    if(MDZT==1)
    {
      MDZT=0
    }
    else{
      MDZT=1
    }
    axios({
      url:'https://localhost:7064/api/MenDian/MDXZT',
      method:'post',
      params:{
        MDid:MDid,
        MDZT:MDZT
      }
    })
    .then(res=>{
      if(res.data.data>0)
    {
      alert('状态修改成功')
      MDShow()
    }
    else
    {
      alert('状态修改失败')
      return
    }
    })
    .catch(err=>{
      console.log(err)
    })
}

//门店列表
function MDShow(){
  let obj={
    index:state.value.index,
    size:state.value.size,
    MDName:state.value.MDName,
    MDZT:state.value.MDZT
  }
  axios({
    url:'https://localhost:7064/api/MenDian/MDShow',
    method:'get',
    params:obj
  })
  .then(res=>{
    list.value=res.data.data;
    Count.value=res.data.count;
    Count2.value=res.data.count2;

  })
  .catch(err=>{
    console.log(err)
  })


}

</script>

<style scoped>

</style>